<template>
	<div style="padding:10px">
    <!-- 功能区 -->
    <el-row :gutter = "30">
      <el-col :span="18">
        <!--搜索区-->
        <pannel-search refs="pannelsearch" v-model="value"  @searchmethod = "search"></pannel-search>
      </el-col>
      <el-col :span="6">
        <!-- 按钮操作区 -->
        <pannel-operation 
          refs="operationpannel" 
          v-model="value" 
          :items="value.btnOperation.customerBtns" 
          @create="create()">    
        </pannel-operation> 
      </el-col>     
    </el-row>
    <el-row>
      <el-col>
        <PannelGrid v-model="value"></PannelGrid>
      </el-col>
    </el-row>
    <div v-if="visible">
      <el-dialog     
        :close-on-click-modal="false"
        :title= "title"
        :class="value.btnOperation.createdialogoption.class"
        :width="value.btnOperation.createdialogoption.width"
        :visible.sync="visible"
      > 
        <loader 
          :vueName="value.btnOperation.createdialogoption.vueName" 
          :src="value.btnOperation.createdialogoption.src" 
          :data="value.btnOperation.createdialogoption.data"
          @closeable = "closeable"
        >
        </loader>       
      </el-dialog>      
    </div>
  </div>    
</template>
<script>
  import loader from './components/entryloader.vue'
  import PannelSearch from './components/pannelsearch'
  import PannelGrid from './components/pannelgrid'
  import PannelOperation from './components/panneloperation'
  export default {
    name: 'SearchPannelMaxin',
    props: {
      value: {
        type: Object,
        default: {}
      }
    },
    components: {
    	PannelSearch,
      PannelGrid,
      PannelOperation,
      loader
    },
    data() {
      return {
        visible: false,
        title: '新增'
      }
    },
    mounted(){
      this.search()  
    },
    methods: {
      create() {
        this.visible = true
        this.title = '新增'
        // this.value.btnOperation.createdialogoption.data = { Id: 1  } 
      },
      closeable(){
        this.visible = false
        this.search()
      },
    	search() {
        const _this = this
        _this.$nextTick(() => {
          if(typeof(_this.setsearchcondition) === 'function'){
            _this.value.searchOperation.searchResult = 
            _this.setsearchcondition(_this.value.searchOperation.searchResult)
          }
          if(typeof(_this.value.searchOperation.r) === 'function'){
            let r = _this.value.searchOperation.r 
            r(_this.value.searchOperation).then( ({data}) => {
              if(typeof(_this.value.searchOperation.aftersearch) === 'function'){
                data = _this.value.searchOperation.aftersearch(data)
              }
              _this.value.gridOperation.datalist = data
            }).catch((error) => {
            })
          }
        })
    	}
    }
  }    
</script>  